<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="水费征收" name="first">
        <div class="card-container">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <b style="color:#409EFF">我的水费信息</b>
            </div>
            <div class="card-body">
              <dl class="flex">
                <dt>当前水价：</dt>
                <dd class="mlauto">0.012元/ｍ³</dd>
              </dl>
              <dl class="flex">
                <dt>账户余额：</dt>
                <dd class="mlauto">0元</dd>
              </dl>
              <dl class="flex">
                <dt>可用水量：</dt>
                <dd class="mlauto">0ｍ³</dd>
              </dl>
              <!-- <dl class="flex">
                <dt>收费单位：</dt>
                <dd class="mlauto">沃丰智慧科技（宁夏）有限公司</dd>
              </dl> -->
            </div>
          </el-card>
          <el-card class="box-card" style="width:500px;margin:120px 12px;">
            <div slot="header" class="clearfix">
              <b style="color:#409EFF">缴费信息</b>
            </div>
            <div class="tip flex" style="">
              <span>单价：0.012元/m³</span>
              <span>可用水量：83333.33m³</span>
              <el-button type="primary" class="mlauto">计算</el-button>
            </div>
            <div class="h12" />
            <div class="card-body-money">
              <el-input v-model="formData.money" placeholder="费用" size="medium" type="number" clearable>
                <template slot="prepend">￥</template>
                <template slot="append">元</template>
              </el-input>
              <div class="h12" />
              <div class="money-container">
                <el-col v-for="(item,index) in moneys" :key="index" :span="8"><span :class="+formData.money === +item?'active':''" @click="setMoney(item)">{{ item }}元</span></el-col>
              </div>
            </div>
            <div class="h12" />
            <el-button type="primary" size="medium" style="width:100%;">立即缴费</el-button>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="充值记录" name="second">
        <el-empty style="margin-top:200px;" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      formData: {
        money: 100
      },
      moneys: [
        100, 200, 300, 500, 1000, 5000
      ]
    }
  },
  methods: {
    setMoney(money) {
      this.formData.money = money
    }
  }
}
</script>

<style lang="scss" scoped>
.money-container{
  display:inline-block;
  width:100%;
  background:#fafafa;
  padding-bottom:20px;
  span{
    display:inline-block;
    width:80%;
    margin:20px 10% 0 10%;
    height:36px;
    line-height:36px;
    text-align:center;
    border-radius:4px;
    cursor:pointer;
    border:2px solid #f0f0f0;
    &:hover,&.active{
      border-color:#409EFF;
      background:#ecf8ff;
    }
  }
}
.tip{
  padding:12px;
  align-items: center;
  span{
    margin-right:24px;
    font-size:15px;
  }
}
.card-container{
  display:flex;
  align-items:center;
  justify-content: center;
}
.box-card{
  width:500px;
  height:400px;
  margin:120px 12px;
}
.card-body{
  dl{
    margin:24px 0;
  }
}
</style>
